Skip to main content

Charting with Highcharts

Highcharts - interactive javascript charting library.​

Corva supports:

Recalculating Highcharts options on every React render cycle requires a lot of CPU resource and may hurt performance. That's why we recommend using memoization technique. Consider the example:

function WITSSummaryChart({ data, dataset, coordinates }) {
  const chartRef = useRef();

  useEffect(() => {
    // NOTE: Update chart size when container size has changed
    chartRef.current?.chart.setSize();
  }, [coordinates]);

  // NOTE: Use memoization technique
  // Calculate chart options ONLY when data changed.
  // This will also help avoid choppy animation
  return useMemo(() => {
    const options = getHighchartsOptions({ data, dataset });

    return (
      <HighchartsReact
        highcharts={Highcharts}
        options={options}
        // NOTE: Pass className to style highchart
        containerProps={{ className: styles.chartContainer }}
        ref={chartRef}
      />
    );
  }, [data]);
}

We calculate Highcharts options and render expensive Highcharts tree only when data changed. This will lover CPU usage and help avoid choppy animation. You can check the full working example here.

Note: any 3rd party developer or development entity should obtain their own developer license for Highcharts for own development. Corva does not have OEM Highcharts license.

Additional resources: